<template>
  <div class="newsinfo-container">
    <div class="title">
      <h2>{{newsinfo.title}}</h2>
      <p class="time">
        <span>发表时间：{{newsinfo.add_time | dateFormat}}</span>
        <span>点击：{{newsinfo.click}}</span>
      </p>
    </div>
    <hr>
    <div v-html="newsinfo.content" class="content"></div>
    <!-- 评论区域 -->
    <comment :id="id"></comment>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
//导入公共评论组件
import comment from "../subcomponents/comment.vue";

  export default{
    data(){
      return {
        id: this.$route.params.id,
        newsinfo:{}
      }
    },
    created(){
      this.getnewsInfo();
    },
    methods:{
      getnewsInfo(){
        this.$http.get('api/getnew/'+this.id).then(result=>{
          if(result.body.status === 0){
            this.newsinfo = result.body.message[0];
          }else{
            Toast("获取失败...")
          }
        });
      }
    },
    components:{
      comment
    }
  }
</script>
<style lang="scss">
  .newsinfo-container{
    //将scoped去掉解决v-html渲染的图片无法100%显示的问题，scoped去掉会造成全局污染的问题，给此页面的大盒子添加一个唯一的类，就不会污染了
    padding:5px 10px;
    .title{
      h2{
        font-size:16px;
        text-align:center;
        margin-bottom: 8px;
      }
      .time{
        display: flex;
        justify-content: space-between;
        color:#26a2ff;
      }
    }
    .content{
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
</style>
